<template>
  <div class="game-container">
    <div class="game-header">
      <BackButton />
      <h1 class="game-title">对对联游戏</h1>
    </div>

    <div class="game-content">
      <div class="couplet-area">
        <div class="upper-couplet">{{ upperCouplet }}</div>
        <div class="input-area">
          <input v-model="userInput" placeholder="请输入下联" />
          <button @click="submitCouplet">提交</button>
        </div>
      </div>

      <div class="score-area">
        <div>得分: {{ score }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import BackButton from '../components/common/BackButton.vue'

const upperCouplet = ref('天增岁月人增寿')
const userInput = ref('')
const score = ref(0)



const submitCouplet = () => {
  // 简单评分逻辑
  if (userInput.value.length >= 4) {
    score.value += 10
    upperCouplet.value = getRandomCouplet()
    userInput.value = ''
  }
}

const couplets = [
  '天增岁月人增寿',
  '春风得意马蹄疾',
  '福如东海长流水',
  '生意兴隆通四海'
]

const getRandomCouplet = () => {
  return couplets[Math.floor(Math.random() * couplets.length)]
}
</script>

<style scoped>
.game-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 20px;
}

.game-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.game-title {
  flex: 1;
  text-align: center;
  font-size: 2rem;
}

.couplet-area {
  text-align: center;
  margin: 20px 0;
}

.upper-couplet {
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.input-area {
  display: flex;
  gap: 10px;
  justify-content: center;
}

input {
  padding: 8px;
  font-size: 1rem;
  width: 300px;
}

button {
  padding: 8px 16px;
  font-size: 1rem;
}

.score-area {
  text-align: center;
  font-size: 1.2rem;
}
</style>